<template>
    <div>
        <div @click="clickBarChart" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <ChartHistogram/>
            </n-icon>
            <Handle id="BarChart-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="BarChart-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>直方图表</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    直方图表
                </template>
                <!--获取上级节点数据 进行去除空值-->
                <n-space>
                    <n-button @click="getSuperiorData">
                        <template #icon>
                            <n-icon>
                                <Login/>
                            </n-icon>
                        </template>
                        获取上级节点数据
                    </n-button>
                    <n-button
                        @click="drawing"
                    >
                        <template #icon>
                            <n-icon>
                                <ChartHistogram/>
                            </n-icon>
                        </template>
                        绘图
                    </n-button>
                    <n-select
                        class="n-select-one"
                        placeholder="代表值"
                        v-model:value="selects.key"
                        :options="props.data.data.title"
                        label-field="title"
                        value-field="key"
                        :disabled="!props.data.data.title"
                    />
                    <n-input-number v-model:value="selects.N" placeholder="箱数"/>
                    <n-input-number v-model:value="selects.range_list[0]" placeholder="区间最小值"/>
                    <n-input-number v-model:value="selects.range_list[1]" placeholder="区间最大值"/>
                </n-space>
                <!--展示数据-->
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div ref="chartDom" style="width: 100%;height:80%;"></div>
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {ChartHistogram, Login} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import * as echarts from 'echarts';
import workApi from "@/http/workApi";


const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const clickBarChart = () => {
    active.value = true
    setTimeout(() => {
        if (props.data.selects) {
            Object.keys(props.data.selects).forEach(key => {
                if (selects.value.hasOwnProperty(key)) {
                    selects.value[key] = props.data.selects[key];
                }
            });
        }
        if (selects.value.key !== null && selects.value.N !== null) {
            drawing();
        }
    }, 1)
}
// 抽屉
const active = ref(false)
const selects = ref({
    key: null,
    N:null,
    range_list:[null,null],

})

const option = ref(null)
let chartDom = ref(null)

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}
const drawing = () => {
    // 绘图
    option.value = {
        title: {
            text: '直方图'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        tooltip: {},
        legend: {
            // Try 'horizontal'
            orient: 'vertical',
            right: 10,
            bottom: 0
        },
        xAxis: {
            data: [],
        },
        yAxis: {},
        series: [
            {
                // 每项的对比名称
                name: "直方图",
                // 类型
                type: "bar",
                // 宽度
                barWidth: '99.8%',
                // 数值
                data: []
            }
        ],
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 100
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                left: '93%',
                start: 0,
                end: 100
            },
        ],
    }
    let myChart = echarts.init(chartDom.value);
    workApi.post("perform_tasks/histogram",{
        data:props.data.data,
        ...selects.value
    }).then(r=>{
        option.value.xAxis.data = r.data['interval_list']
        option.value.series[0].data = r.data['number_list']
        console.log(option.value)
        props.data.selects = selects.value
        props.data.option = option.value
        option.value && myChart.setOption(option.value);
    })

}
</script>

<style scoped lang="less">
.n-select-one {
    width: 8vw;
}

.n-select-two {
    width: 45vw;
}

.n-space {
    .n-space-span {
        position: relative;
        top: 18%;
    }
}
</style>